<!---vue鉴权


问题：为什么forEach的this取不到vue data里的值？如何解决
场景二：登录后，根据不同用户展示不同菜单？在homePage里写公共左侧导航组件？
后台提供：rules,代表不同权限看不同的内容
userArr:[
					{
						"username":"admin",
						"password":"123456",
						"rules":"/user/list,/task/list"
					},
					{
						"username":"admin1",
						"password":"123457",
						"rules":"/user/list"
					}
				],

需要做啥：先登录后，跳转页homePage,先写成功后，跳转到homePage的路由
先写公共左侧导航组件leftNav
第一个场景：父组件homePage向子组件leftNav传值？
模拟组件传值场景：homePage父组件有个input框，修改input框的值(比如写789)，子组件的id（也跟着变789），跟着变化，
方法：先在子组件写定义父组件需要传的值(id)-----在子组件props里定义这个值eg：id,
在父组件中,引用子组件(先写标签leftNav，然后import,再去components定义)，在子组件对应标签里v-bind

-->
<template>
	<div>  
     我是子组件leftVue:
		id:{{id}} 
		menuData :{{menuData}}
		-------------------------下面是二级导航列表渲染----------------------------------------
		<div v-for="secMenu in menuData">
			<div class="c-light-gray p-l-10 m-t-15">{{secMenu.title}}</div>
			<div class="h-50" v-for="item in secMenu.child">
				<div class="w-100p h-50 p-l-40 left-menu pointer c-blue" >{{item.title}}</div>
			</div>
		</div>
	</div>
</template>

<script>
  export default {
	props: ['id','menuData'],
    data() {
      return {
      }
    },
    methods: {
    },
  }
</script>

<style>
.verify-pos {
	position: absolute;
	right: 100px;
	top: 0px;
}
.card-box {
	padding: 20px;
	/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	background-clip: padding-box;
	margin-bottom: 20px;
	background-color: #F9FAFC;
	margin: 120px auto;
	width: 400px;
	border: 2px solid #8492A6;
}

.title {
	margin: 0px auto 40px auto;
	text-align: center;
	color: #505458;
}

.loginform {
	width: 350px;
	padding: 35px 35px 15px 35px;
}
</style>